<template>
  <div>
    <text class="message">Login</text>
    <div style="background-color: #286090">
      <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
    </div>
    <input type="text" placeholder="Input Text" class="input" :autofocus="true" :value="message" @change="onchange" @input="oninput"/>

    <text class="output">{{message}}</text>
  </div>
</template>

<style scoped>
.output {
  font-size: 25px;
  color: #a52a2a;
}
</style>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    onchange (event) {
      this.message = event.value
      console.log('onchange', event.value)
    },
    oninput (event) {
      this.message = event.value
      console.log('oninput', event.value)
    }
  }
}
</script>
